<template>
  <div>
    <div>
      <div class="header">
        <router-link to="/">
          <span class="iconfont back-icon">&#xe624;</span>
        </router-link>
        搜索
      </div>
    </div>
    <div class="searchInput">
      <input type="text" placeholder="请输入店铺名"
             v-model="keyword"
      >
    </div>
    <div class="hotsearch" style="text-align: center;margin-top: 20px;font-size: 16px;color: #8c939d">
        <h1>发现你心中的美食吧~</h1>
    </div>
    <div class="searchCity" ref="wrapper" v-show="keyword">
      <ul>
        <li
          v-for="item of list"
          :key="item.id"
          class="border-bottom"
          @click="toshoper(item)"
        >
          <img :src="item.imgUrl" style="width: 50px;height: 50px;margin-right: 10px">
          <div style="display: inline-block">
            <p style="font-size: 18px;color: #dd6161">{{item.name}}</p>
            <p style="font-size: 13px;color: #8c939d">距离:{{item.distance}}</p>
          </div>
        </li>
        <li v-show="noData" style="text-align: center">没有该商家呦~</li>
      </ul>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    name: 'ResSearch',
    data () {
      return {
        keyword: '',
        timer: null,
        list: [],
        restaurantsList: []
      }
    },
    methods: {
      getResInfoSucc (res) {
        var body = res.data
        if (body.ret && body.data) {
          this.restaurantsList = body.data.restaurantsList
        }
      },
      toshoper (item) {
        this.$router.push({path: '/shoper', query: {name: item.name, url: item.imgUrl}})
      }
    },
    mounted () {
      this.$http.get('/static/message/index.json').then(this.getResInfoSucc)
      this.scroll = new BScroll(this.$refs.wrapper)
      this.scroll = new BScroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
    },
    computed: {
      noData () {
        return !this.list.length
      }
    },
    watch: {
      keyword () {
        if (!this.keyword) {
          this.list = []
          return
        }
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          const result = []
          this.restaurantsList.forEach((value) => {
            if (value.name.indexOf(this.keyword) > -1) {
              result.push(value)
            }
          })
          this.list = result
          return this.list
        }, 100)
      }
    }
  }
</script>
<style scoped>
  .header {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: blue;
    font-size: 18px;
    line-height: 60px;
    text-align: center;
    color:white;
  }
  .header span {
    position: absolute;
    left:5px;
    color: white;
  }
  .searchInput {
    width: 100%;
    height: 35px;
    background-color: blue;
  }
  .searchInput input {
    margin-top: 4px;
    width: 94%;
    height: 26px;
    text-align: center;
    line-height: 30px;
    margin-left: 3%;
    border-radius: 4px;
    padding:0 26px;
    box-sizing: border-box;
    outline:none;
    boreder:0;
  }
  .searchCity {
    position: absolute;
    width: 100%;
    top: 95px;
    left: 0;
    bottom: 0;
    background-color: #cccccc;
    z-index: 1;
    overflow: hidden;
  }
  .searchCity ul li {
    line-height: 35px;
    background-color: white;
    padding: 8px 0 8px 8px;
    border-bottom: 1px solid rgba(7,17,27,.1);
  }
</style>
